@import "~scss/variables";
@import "~scss/mixins";

$sw-flow-trigger-transition-results: all ease-in-out 0.2s;

.sw-flow-trigger {
    &__event-selection {
        min-width: 100%;
        max-width: 150%;
    }

    .sw-tree {
        border: unset;
        max-width: 150%;

        &:focus-within {
            box-shadow: none;
        }
    }

    .sw-tree-item {
        &.is--no-children {
            .sw-tree-item__element {
                cursor: pointer;
            }
        }
    }

    .sw-tree-item__children .sw-tree-item__element .sw-tree-item__icon {
        width: auto;
    }

    &.overlay {
        position: relative;

        .sw-flow-trigger__select-toolbar {
            margin-bottom: 3px;
        }
    }

    &.overlay .sw-flow-trigger__event-selection {
        position: absolute;
        z-index: $z-index-flyout;
        border-radius: $border-radius-default;
        background-color: $color-white;
        background-clip: padding-box;
        box-shadow: 0 1px 6px 0 lighten($color-darkgray-200, 30%);
    }

    .sw-flow-trigger__search-field {
        margin-bottom: 0;

        .sw-field__label label {
            font-size: $font-size-s;
            font-weight: $font-weight-semi-bold;
        }

        .sw-block-field__block input {
            text-overflow: ellipsis;
            padding-right: 28px;

            &::placeholder {
                text-transform: none;
            }
        }
    }

    &__search-results {
        padding: 12px;
        max-height: 600px;
        overflow: auto;

        li.sw-flow-trigger__search-result {
            transition: background-color 0.1s ease;
            cursor: pointer;
            list-style: none;
            display: flex;
            padding: 0 12px 10px;
            border-radius: $border-radius-default;

            &:hover,
            &.is--focus {
                background-color: lighten($color-shopware-brand-500, 40);
            }
        }

        li .sw-flow-trigger__search-result-icon {
            margin-right: 12px;
        }

        li .sw-flow-trigger__search-result-name {
            font-size: $font-size-xs;
            padding-top: 3px;
        }
    }

    &__empty {
        padding: 12px;
    }

    &__loader.sw-loader {
        @include size(16px);

        position: static;
        margin-right: 10px;

        .sw-loader__container {
            transform: none;
            left: 0;
            top: 0;
        }
    }

    &__dropdown-icon {
        display: block;
        position: absolute;
        top: 44px;
        right: 16px;
        text-align: center;
        color: #52667a;
        pointer-events: none;
    }

    // Vue.js transitions
    .sw-flow-trigger__fade-down-enter-active,
    .sw-flow-trigger__fade-down-leave-active {
        transition: $sw-flow-trigger-transition-results;
        transform: translateY(0);
    }

    .sw-flow-trigger__fade-down-enter,
    .sw-flow-trigger__fade-down-leave-to {
        transform: translateY(-8px);
        opacity: 0;
    }

    @media screen and (max-height: $content-width) {
        &__search-results {
            max-height: 400px;
        }

        .sw-tree .sw-tree__content {
            max-height: 400px;
        }
    }

    @media screen and (max-height: 1024px) {
        &__search-results {
            max-height: 480px;
        }

        .sw-tree .sw-tree__content {
            max-height: 480px;
        }
    }
}
